<template>
  <client-only>
    <div class="app-container">
      <!-- 主页账户 -->
      <div class="account">
        <div class="head">
          <p class="curstomerInfo">
            <a href="/">主页</a>
            <span style="color: #8f98a0">></span>
            <a href="#">账户</a>
          </p>
          <h1 class="h1">{{ list.userName }}的账户</h1>
        </div>
      </div>
      <!-- /主页账户 结束-->

      <!-- 内容部分 -->
      <!-- 左侧导航栏 -->
      <div class="main">
        <div class="left_nav">
          <ul>
            <li><a href="#">账户明细</a></li>
            <li><a href="/personCenter/gameOrder">个人订单</a></li>
          </ul>
        </div>
        <!-- /左侧导航栏 -->

        <!-- 右侧内容部分 -->
        <div class="right_nav">
          <div class="listInfo">
            <!-- 商店和消费历史 -->
            <div class="title_Info">
              <div class="title">
                <span>图标</span>
                商店和消费历史记录
              </div>

              <div class="main_Info">
                <!-- 左侧 -->
                <div class="shopp_Info">
                  <div class="left_Info">
                    <p class="left_text">
                      <a href="#">+ 为您的蒸汽平台钱包充值</a>
                    </p>
                    <div class="left_price">
                      <p class="balance">钱包余额</p>
                      <h2>￥{{ list.burse }}</h2>
                    </div>
                  </div>
                  <!-- 右侧 -->
                  <div class="right_Info">
                    <p class="left_text"><a href="#">查看消费历史记录</a></p>
                    <p class="left_text"><a href="#">更新商店偏好</a></p>
                  </div>
                </div>
              </div>
            </div>
            <!-- 联系信息 -->
            <div class="title_Info">
              <div class="title">
                <span>图片</span>
                联系信息
              </div>

              <div class="contact_main">
                <div class="main_left">
                  <ul>
                    <li>
                      <a href="#">管理电子邮件偏好</a>
                    </li>
                    <li>
                      <span class="state">电子邮件地址:</span> 188418408@qq.com
                    </li>
                    <li><span class="state">状态:</span> 已验证</li>
                    <li>
                      <a href="#">更改我的电子邮件地址</a>
                    </li>
                  </ul>
                </div>

                <div class="main_right">
                  <p class="number">
                    <a href="#">管理您的手机号码</a>
                  </p>
                  <p><span class="state">手机:</span> <span></span>尾号为68</p>
                </div>
              </div>
            </div>
            <!-- 账户安全 -->
            <div class="account_Info">
              <div class="title">
                <span>图片</span>
                账户安全
              </div>
              <div class="content">
                <p>
                  <span class="state">状态: </span><span>??</span>
                  此用户没有启用蒸汽平台令牌。
                </p>
                <div class="control">
                  <a href="#">管理蒸汽平台令牌</a>
                </div>
                <div class="control">
                  <a href="#">更改我的密码</a>
                </div>
                <div class="listInfo">
                  蒸汽平台令牌通过在登录时要求输入一串额外代码来帮助保护您的账户免受非法访问
                </div>
              </div>
            </div>
            <!-- 家庭设置 -->
            <div class="title_Info">
              <div class="title">
                <span>图片</span>
                家庭设置
              </div>
              <div class="content_family">
                <div class="family_main">
                  <div class="left_family">
                    <p class="familyText">
                      <a href="#">管理家庭库共享</a>
                    </p>
                    <div class="familyLeft_text">
                      在您不进行游戏时,家庭库共享允许选中的帐户在已授权的计算机上使用您的游戏库。您最多可以同时授权10台计算机。
                    </div>
                  </div>
                  <div class="right_family">
                    <p>家庭监护已禁用</p>
                    <p class="familyText">
                      <a href="#" class="one">管理家庭监护</a>
                    </p>
                    <div class="familyRight_text">
                      家庭监护采用受PIN码保护的家度监护来限制对内容和功能的访问。
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="delAccount">
              <div class="footmian">
                <div class="foot">
                  <a href="#">删除我的蒸汽平台账户</a
                  >—了解更多关于永久删除账户及其相关资料的信息。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /左侧导航栏 -->
    </div>
  </client-only>
</template>

<script>
import "../../assets/css/personCenter.css";
import Cookie from "js-cookie";

export default {
  middleware: "default",
  data() {
    return {
      list: {}, //保存token里面的值
    };
  },
  created() {
    this.init();
  },
  methods: {
    // 页面初始化
    init() {
      const token = Cookie.get("gameMall_token");
      if (token) {
        // 获取token里面的值
        let t = Cookie.get("userInfo");
        // console.log(t);
        // 判断是否有值，如果有值就反序列化
        if (t != null) {
          this.list = JSON.parse(t);
          //   console.log(this.list);
        }
      }
    },
  },
};
</script>
